// 吸顶效果

$(function(){
    $(window).scroll(function(){
        if($(window).scrollTop()>50){
            $(".nav-bottom").css({"position":"fixed","top":0,"background":"#fff","width":"100%"});
            $('.nb-left1 a').css({"color":"#000"})
            $('.nb-left2 a').css({"color":"#000"})
            $('.nb-left3 a').css({"color":"#000"})
            $('.nb-left4 a').css({"color":"#000"})
            $('.nb-left5 a').css({"color":"#000"})
            $('.nb-left6 a').css({"color":"#000"})
            $('.nb-right').css({"display":"none"})
            $('.nb-right-two').css({"display":"block"})
            var aplOne=document.querySelector('.pull-one')
            $('.pull-one').css({"top":"40px"})
            $('.pull-two').css({"top":"40px"})
            $('.pull-three').css({"top":"40px"})
  
            $('.nb-left1').mouseenter(function(){
              $('.pull-one').css('display','block')
              if(aplOne.style.display==='block'){
                $('.pull-one').stop().animate({
                  top:'60px',
               },400)
              }  
            })
            
            $('.nb-left1').mouseleave(function(){
              $('.pull-one').css('display','none')
              $('.pull-one').css('top','40px')
            })
            var aplTwo=document.querySelector('.pull-two')
            $('.nb-left2').mouseenter(function(){
              $('.pull-two').css('display','block')
              if(aplTwo.style.display==='block'){
                $('.pull-two').stop().animate({
                top:'60px' 
               },400)
              }  
            })
            
            $('.nb-left2').mouseleave(function(){
              $('.pull-two').css('display','none')
              $('.pull-two').css('top','40px')
            })
            // 第三个
            var aplThree=document.querySelector('.pull-three')
            $('.nb-left3').mouseenter(function(){
              $('.pull-three').css('display','block')
              if(aplThree.style.display==='block'){
                $('.pull-three').stop().animate({
                top:'60px' 
               },400)
              }  
            })
            
            $('.nb-left3').mouseleave(function(){
              $('.pull-three').css('display','none')
              $('.pull-three').css('top','40px')
            })
        }else{
            $(".nav-bottom").css({"position":"static","top":"50px","background":"none"});
            $('.nb-right').css({"display":"block"})
            $('.nb-right-two').css({"display":"none"})
            $('.pull-one').css({"top":"100px"})
            $('.pull-two').css({"top":"100px"})
            $('.pull-three').css({"top":"100px"})
            $('.nav-bottom').mouseover(function(){
              $('.nav').css('background','#fff')
              $('.nb-left1 a').css("color","#000")
              $('.nb-left2 a').css("color","#000")
              $('.nb-left3 a').css("color","#000")
              $('.nb-left4 a').css("color","#000")
              $('.nb-left5 a').css("color","#000")
              $('.nb-left6 a').css("color","#000")
  
            })
            $('.nav').mouseout(function(){
              $('.nav').css('background','none')
            })
            // 护肤二级
            // 第一个
            var aplOne=document.querySelector('.pull-one')
            $('.nb-left1').mouseenter(function(){
              $('.pull-one').css('display','block')
              if(aplOne.style.display==='block'){
                $('.pull-one').stop().animate({
                  top:'120px',
               },400)
              }  
            })
            
            $('.nb-left1').mouseleave(function(){
              $('.pull-one').css('display','none')
              $('.pull-one').css('top','100px')
            })
            // 第二个
            var aplTwo=document.querySelector('.pull-two')
            $('.nb-left2').mouseenter(function(){
              $('.pull-two').css('display','block')
              if(aplTwo.style.display==='block'){
                $('.pull-two').stop().animate({
                top:'120px' 
               },400)
              }  
            })
            
            $('.nb-left2').mouseleave(function(){
              $('.pull-two').css('display','none')
              $('.pull-two').css('top','100px')
            })
            // 第三个
            var aplThree=document.querySelector('.pull-three')
            $('.nb-left3').mouseenter(function(){
              $('.pull-three').css('display','block')
              if(aplThree.style.display==='block'){
                $('.pull-three').stop().animate({
                top:'120px' 
               },400)
              }  
            })
            
            $('.nb-left3').mouseleave(function(){
              $('.pull-three').css('display','none')
              $('.pull-three').css('top','100px')
            })
                  }
              });
            });
  



           // 护肤二级
           // 第一个
           var aplOne=document.querySelector('.pull-one')
           $('.nb-left1').mouseenter(function(){
             $('.pull-one').css('display','block')
             if(aplOne.style.display==='block'){
               $('.pull-one').stop().animate({
                 top:'120px',
              },400)
             }  
           })
           
           $('.nb-left1').mouseleave(function(){
             $('.pull-one').css('display','none')
             $('.pull-one').css('top','100px')
           })
           // 第二个
           var aplTwo=document.querySelector('.pull-two')
           $('.nb-left2').mouseenter(function(){
             $('.pull-two').css('display','block')
             if(aplTwo.style.display==='block'){
               $('.pull-two').stop().animate({
               top:'120px' 
              },400)
             }  
           })
           
           $('.nb-left2').mouseleave(function(){
             $('.pull-two').css('display','none')
             $('.pull-two').css('top','100px')
           })
           // 第三个
           var aplThree=document.querySelector('.pull-three')
           $('.nb-left3').mouseenter(function(){
             $('.pull-three').css('display','block')
             if(aplThree.style.display==='block'){
               $('.pull-three').stop().animate({
               top:'120px' 
              },400)
             }  
           })
           
           $('.nb-left3').mouseleave(function(){
             $('.pull-three').css('display','none')
             $('.pull-three').css('top','100px')
           })
           



           
// 登录
// 登录
// $('.loginBox').hide()
// 点击小人时
$('.icon-geren').click(function () {
  $('.loginBox').animate({right: 0} , 1000)
})
$('.text-right').find('span').click(function() {
  $('.loginBox').animate({right: -600} , 1000)
})



  // 登录

  $('.login-box').find('.tab-box').click(function () {
    $(this).addClass('login-on')
    .siblings().removeClass('login-on')
    // index
    let index = $(this).index()
    console.log(this)

    $(this).siblings('div')
    .eq(index).addClass('login-active')
    .siblings().removeClass('login-active')
})
// ...............登录......................
let oAll=document.querySelector('#login')
let oEmail =document.querySelector('.login-email')
let oPass=document.querySelector('.login-pass')
let oLogin=document.querySelector('.login-in')
let sLogin=document.querySelector('.login-span')
let oPhone=document.querySelector('.login-phone')
let oCode=document.querySelector('.login-code')
let oSend=document.querySelector('.send-code')
let uPhone=document.querySelector('.under-phone')
let oVip=document.querySelector('.become-vip')
let oFil=document.querySelector('.icon-cross-fill')
let noVip=document.querySelector('.no-vip')
let oShort=document.querySelector('.short-img')
let onoem=document.querySelector('.no-emill')
let reEmail=/^\w+@\w+(.com|.cn|.net|.org|)$/
// ............手机号登录..................
let rePhone=/^1[3-9]\d{9}$/
// if(rePhone){
//     oSend.style.color='black'
// }
let reCode=/^\d{6}$/
let phoneFlag =false
let codeFlag =false
let unphoneFlag=false
oPhone.addEventListener('change',function(){
    if(!rePhone.test(this.value)){
        // alert('错误')
        phoneFlag =false
    }
    else{
        oSend.style.color='black'
        phoneFlag =true
    }
    
})
oCode.addEventListener('change',function(){
    if(!reCode.test(this.value)){
        // alert('错误')
        codeFlag =false
    }
    else{
        codeFlag =true
        sLogin.style.opacity='1'
    }
})
sLogin.addEventListener('click', function(){
    //    let f= arr.every(function(ele){
    //         return ele.flag ===true
    //     })
        // console.log(f)
        // console.log(arr)
        if(phoneFlag && codeFlag){
        pAjax({
            url: '../php/login.php',
            type:'post',
            data: {
                username: oPhone.value,
                password: oCode.value
            }
        }).then(function(res){
            // console.log(JSON.parse(res))
            let json=JSON.parse(res)
            if(json.code===0){
                window.location.href='../index.html'
                localStorage.setItem('token',json.token)
            }
                // alert(json.msg)
        })
    }
    else{
        oShort.style.display='block'
    }
    if(phoneFlag){
        pAjax({
            url: '../php/login.php',
            type:'post',
            data: {
                username: oPhone.value,
                password: oCode.value
            }
        }).then(function(res){
            let json=JSON.parse(res)
            if(json.code!==0){
            noVip.style.display='block'
            }
                // alert(json.msg)
        })
    }
    else{
        oShort.style.display='block'
    }
    // if(!phoneFlag){
    //      noVip.style.display='block'
    // }
    },false)
console.log(noVip)
// let count=0
// let reEmail=/1^\d{10}/
let rePass =/^\w{8,16}$/
// let arr =[
//     {emFaillag:false},
//     {passFlag:false}
// ]
let emFaillag = false
let passFlag =false
// let arr=[]
oEmail.addEventListener('change',function(){
    if(!reEmail.test(this.value)){
        // alert('错误')
        emFaillag = false
        // arr[0] = { flag: false}
    }else{
        emFaillag =true
        // arr[0] = { flag: true}
    }
    // else{
    //     count++
    // }
})
oPass.addEventListener('change',function(){
    if(!rePass.test(this.value)){
        // alert('错误')
        passFlag=false
        // arr[1] = {flag: false}
    }else{
        // arr[1] = {flag: true}
        passFlag=true
         oLogin.style.opacity='1'
    }
    // else{
    //     count++
    // }
})
oLogin.addEventListener('click', function(){
        if(emFaillag && passFlag){
        pAjax({
            url: '../php/login.php',
            type:'post',
            data: {
                username: oEmail.value,
                password: oPass.value
            }
        })
        .then(function(res){
            // console.log(JSON.parse(res))
            let json=JSON.parse(res)
            if(json.code===0){
                window.location.href='../index.html'
                localStorage.setItem('token',json.token)
            }
            // onoem.style.display='block'
        })
    }
    else{
        noVip.style.display='block'
    }
    if(emFaillag ){
        pAjax({
            url: '../php/login.php',
            type:'post',
            data: {
                username: oEmail.value,
                password: oPass.value
            }
        })
        .then(function(res){
            let json=JSON.parse(res)
            if(json.code!==0){
                onoem.style.display='block'
            }
                // alert(json.msg)
        })
    }
    },false)
    console.log(onoem)
    uPhone.addEventListener('change',function(){
        if(!rePhone.test(this.value)){
            oVip.style.opacity='1'
        }
    })
    oVip.addEventListener('click',function(){
        if(!rePhone.test(this.value)){
            window.location.href='../html/register.html'
           }    
    })
    
// .......................点击x整个消失.................
    // oFil.addEventListener('click',function(){
    //     oAll.style.display='none'
    // })
